<template>
  <!-- 表单组件 -->
  <HyCard :title="tableConfig.title" v-if="tableConfig.showSearch">
    <TzhForm ref="hyFormRef" :hyFormDefault="searchDefault" :hyFormConfig="searchConfig" :hyFormFields="searchFields">
      <template #customTop>
        <el-col v-if="tableConfig.isCostomTop" :span="searchButtonConfig.span" :offset="searchButtonConfig.offset">
          <div>
            <el-button type="primary" @click="handleSearch" :loading="state.loading"> 添加 </el-button>
            <el-button type="primary" @click="handleSearch" :loading="state.loading"> 导入 </el-button>
            <el-button type="primary" @click="handleSearch" :loading="state.loading"> 导出 </el-button>
            <el-button type="primary" :loading="state.loading" @click="handleRest"> 模板下载 </el-button>
          </div>
        </el-col>
      </template>
      <template #custom>
        <el-col :span="searchButtonConfig.span" :offset="searchButtonConfig.offset">
          <div>
            <el-button icon="Search" type="primary" @click="handleSearch" :loading="state.loading"> 查询 </el-button>
            <el-button icon="RefreshLeft" style="margin-left: 24px" :loading="state.loading" @click="handleRest"> 重置 </el-button>
          </div>
        </el-col>
      </template>
    </TzhForm>
  </HyCard>
  <TzhCard v-else :title="tableConfig.title"></TzhCard>
  <div class="mt-5"></div>
  <HyCard>
    <!--  表格头部组件 -->
    <slot name="tableHeader"></slot>
    <!-- 表格组件 -->
    <el-table
        class="mt-5"
        :cell-style="{ textAlign: 'center' }"
        :header-cell-style="{ textAlign: 'center', background: 'var(--el-table-row-hover-bg-color)', color: 'var(--el-text-color-primary)' }"
        :data="state.tableData"
        style="width: 100%"
        v-loading="state.loading"
        :row-key="tableConfig.rowKey"
        @selection-change="handleSelectionChange"
        :highlight-current-row="tableConfig.singleSelect"
        @current-change="handleCurrentChange"
        border
    >
      <el-table-column v-if="tableConfig.multiple" type="selection" width="55" />
      <el-table-column :fixed="tableConfig.indexFixed" type="index" label="序号" width="80" />
      <el-table-column
          v-for="item in tableColumns"
          :prop="item.prop"
          :label="item.label"
          :width="item.width"
          :fixed="item.fixed ? item.fixed : false"
          :key="item.prop"
          show-overflow-tooltip
          :formatter="item.formatter ? (row: any, column: any, )=>item.formatter(row,column) : null"
      >
      </el-table-column>
      <slot name="operation"> </slot>
    </el-table>
    <div v-if="!tableConfig.hiddenPageInfo" style="text-align: right; width: 100%; margin-top: 20px">
      <el-pagination
          v-model:current-page="state.pageInfo.current"
          :page-size="state.pageInfo.size"
          layout="total, sizes,prev, pager, next,jumper"
          :total="state.total"
          @current-change="currentChange"
          @size-change="sizeChange"
      />
    </div>
  </HyCard>
</template>

<script lang="ts" setup>
import { onMounted, ref, toRefs } from 'vue';
import TzhForm from '/@/components/TzhForm/index.vue';
import HyCard from '/@/components/HyCard/index.vue';
import TzhCard from '/@/components/TzhCard/index.vue';
//父级菜单传来的值
const props = defineProps({
  searchButtonConfig: {
    type: Object,
    default: () => {
      return {
        span: 6,
        offset: 0,
      };
    },
  },
  tableColumns: {
    type: Object,
    default: () => {
      return {};
    },
  },
  tableConfig: {
    default: () => ({
      rowKey: 'id',
      showSearch: false,
      multiple: false,
      singleSelect: false,
      leftButtons: () => {
        return [];
      },
      request: () => {},
      hiddenPageInfo: false,
      defaultData: [],
      requestParames: () => {
        return {};
      },
      title: '',
    }),
    type: Object,
  },

  searchFields: {
    type: Object,
    default: () => {
      return {};
    },
  },
  searchConfig: {
    type: Object,
    default: () => {
      return {
        labelWidth: '120px',
        span: 6,
        offset: 0,
        type: 'search',
      };
    },
  },
  searchDefault: {
    default: () => {
      return {};
    },
    type: Object,
  },
});
const emit = defineEmits(['getData'])

const { tableColumns, tableConfig, searchConfig, searchDefault, searchFields } = toRefs(props);
let state = ref<any>({
  pageInfo: {
    current: 1,
    size: 10,
  },
  total: 0,
  loading: false,
  tableData: [],
});
const searchData = ref({});
watch(
    [() => tableConfig.value.defaultData, () => tableConfig.value.requestParames],
    ([nv1, nv2]) => {
      if (nv1) state.value.tableData = tableConfig.value.defaultData;
      if (nv2) getTableData();
    },
    { immediate: true }
);
onMounted(() => {
  getTableData();
});
// 获取分页数据
const getTableData = async () => {
  if (tableConfig.value.request) {
    state.value.loading = true;
    tableConfig.value
        ?.request({ ...state.value.pageInfo, ...searchData.value, ...props.tableConfig.requestParames })
        .then((response: any) => {
          if (response?.data) {
            // state.value.tableData = response.data.records;
            state.value.total = response.data?.total;
          }
          emit('getData', response)
        })
        .finally(() => {
          state.value.loading = false;
        });
  }
};
//页码改变
const currentChange = (current: number) => {
  state.value.pageInfo.current = current;
  getTableData();
};

// 每页数量
const sizeChange = (size: number) => {
  state.value.pageInfo.size = size;
  getTableData();
};
//列表映射翻译
// const formatter = (value: any, data: any) => {
// 	if (value) {
// 		const item = data.find((item: any) => item.value == value);
// 		return item ? item.lable : '';
// 	}
// 	return value;
// };
const selectOptions = ref<any>([]);

//多选
const handleSelectionChange = (value: any) => {
  selectOptions.value = value;
};
//单选
const handleCurrentChange = (value: any) => {
  selectOptions.value = value;
};
//查询
const hyFormRef = ref();
const handleSearch = () => {
  searchData.value = hyFormRef.value.hyForm;
  getTableData();
};
//重置
const handleRest = () => {
  searchData.value = {};
  hyFormRef.value.resetFields();
  getTableData();
};
// 暴露
defineExpose({ getTableData, selectOptions, state });
</script>

<style lang="scss" scopde></style>
